<template>
  <div class="app-container">
    <PageSearch :showSearch.sync="showSearch" :getList="getList" :handleQuery="handleQuery" :resetQuery="resetQuery">
      <template #pagination>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </template>
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
          <el-row>
            <el-form-item prop="shopName">
              <el-input
                v-model="queryParams.shopName"
                :placeholder="$t('店铺名称')"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item prop="skuNo">
              <el-input
                :placeholder="$t('单品SKU(包含组内的)')"
                v-model="queryParams.skuNo"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item prop="combinationName">
              <el-input
                :placeholder="$t('组合SKU')"
                v-model="queryParams.combinationName"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item prop="shopSku">
              <el-input
                :placeholder="$t('店铺SKU')"
                v-model="queryParams.shopSku"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>

            <el-form-item prop="shopType">
              <el-select
                :placeholder="$t('平台类型')"
                @change="handleQuery"
                clearable
                filterable
                v-model="queryParams.shopType"
              >
                <el-option
                  :value="item.dictValue"
                  :label="item.dictLabel"
                  v-for="(item, index) in shop_type_list"
                  :key="index"
                />
              </el-select>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item prop="shopSkuType">
              <el-select
                :placeholder="$t('店铺SKU类型')"
                @change="handleQuery"
                clearable
                filterable
                v-model="queryParams.shopSkuType"
              >
                <el-option :value="1" :label="$t('单品')" />
                <el-option :value="2" :label="$t('组合')" />
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #actions>
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['distribution:skuShop:add']"
            >
              {{ $t('新增') }}
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['distribution:skuShop:remove']"
            >
              {{ $t('删除') }}
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['distribution:skuShop:exportShopSku']"
            >
              {{ $t('导出') }}
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="showImport = true"
              icon="el-icon-upload2"
              v-hasPermi="['distribution:skuShop:importShopSku']"
            >
              {{ $t('导入') }}
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="primary"
              @click="handleUpdateSales"
              plain
              size="mini"
              v-hasPermi="['distribution:skuShop:updateSales']"
            >
              {{ $t('更新店铺销量') }}
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="handleComputeRecommendStock"
              v-hasPermi="['distribution:skuShop:computeRecommendStock']"
            >
              {{ $t('推荐店铺库存') }}
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="primary"
              @click="handleUpdateStockByRecommendStock"
              v-hasPermi="['distribution:skuShop:updateStockByRecommendStock']"
              plain
              size="mini"
            >
              {{ $t('更新推荐库存') }}
            </el-button>
          </el-col>
        </el-row>
      </template>
    </PageSearch>

    <el-table
      @row-click="(row) => $rowClick(row, clickedRows)"
      :row-class-name="({ row }) => $tableRowClassName(row, clickedRows)"
      :height="calTableHeight()"
      v-loading="loading"
      ref="MainTableRef"
      :data="skuShopList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column show-overflow-tooltip type="selection" width="55" align="center" />
      <el-table-column show-overflow-tooltip width="150" :label="$t('平台/店铺')" align="center" prop="shopType">
        <template slot-scope="{ row }">
          <div>{{ handleType(row.shopType) }}</div>
          <div>{{ row.shopName }}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('图片')" align="center" prop="imgUrl">
        <template slot-scope="{ row }">
          <el-image
            fit="contain"
            style="width: 50px; height: 50px"
            :key="Math.random()"
            v-hover="row.imgUrl"
            :src="row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
          />
        </template>
      </el-table-column>
      <el-table-column width="150" show-overflow-tooltip :label="$t('库存/店铺sku')" align="center" prop="shopName">
        <template slot-scope="{ row }">
          <div style="cursor: pointer; color: #1890ff" @click="handleShopStock(row)">
            {{ row.stock || $t('未分配') }}
          </div>
          <div>{{ row.shopSku }}</div>
        </template>
      </el-table-column>
      <el-table-column width="150" show-overflow-tooltip :label="$t('类型/sku、组合')" align="center" prop="shopSku">
        <template slot-scope="{ row }">
          <!-- 店铺SKU类型 1-单品 2-组合 -->
          <div v-if="row.shopSkuType == 1">
            <div style="color: green">
              {{ $t('单品') }}
            </div>
            <div @click="handleEdit(row)" style="cursor: pointer; color: #1890ff">{{ row.skuNo }}</div>
          </div>
          <div v-if="row.shopSkuType == 2">
            <div style="color: red">
              {{ $t('组合') }}
            </div>
            <div @click="handleCombinationInfo(row)" style="cursor: pointer; color: #1890ff">
              {{ row.combinationName }}
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        width="150"
        :label="$t('店铺库存管理')"
        align="center"
        prop="isStockManage"
      >
        <template #header>
          <el-tooltip placement="top">
            <i class="el-icon-question" style="cursor: pointer; color: #409eff"></i>
            <template #content>
              <p>开启：开启时才会对此店铺sku推荐库存</p>
              <p>关闭：关闭时会忽略此店铺sku的销量，并且不会推荐此店铺sku推荐库存</p>
            </template>
          </el-tooltip>
          <span>{{ $t('店铺库存管理') }}</span>
        </template>
        <template slot-scope="{ row }">
          <el-select
            size="small"
            @change="handleUpdateSetting($event, 'isStockManage', row)"
            v-model="row.isStockManage"
            :disabled="!$hasPermission('distribution:skuShopStock:edit')"
          >
            <el-option :label="$t('关闭')" :value="0" />
            <el-option :label="$t('开启')" :value="1" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column width="140" show-overflow-tooltip :label="$t('推荐库存')" align="center" prop="recommendStock">
        <template slot-scope="{ row }">
          <div style="cursor: pointer; color: #1890ff" @click="handleRecommendStock(row)">
            <span v-if="row.recommendStock == null">{{ $t('未设置') }} </span>
            <span v-else> {{ row.recommendStock }}</span>
          </div>
          <div style="font-size: 12px">{{ row.recommendStockUpdateTime }}</div>
        </template>
      </el-table-column>

      <el-table-column
        width="120"
        show-overflow-tooltip
        :label="$t('锁定库存推荐')"
        align="center"
        prop="isIgnoreRecommendStock"
      >
        <template #header>
          <el-tooltip placement="top">
            <i class="el-icon-question" style="cursor: pointer; color: #409eff"></i>
            <template #content>
              <p>锁定：锁定店铺库存，不作推荐</p>
              <p>推荐：优先扣除锁定的库存后按销量推荐</p>
            </template>
          </el-tooltip>
          <span>{{ $t('锁定库存推荐') }}</span>
        </template>
        <template slot-scope="{ row }">
          <el-select
            size="small"
            @change="handleUpdateSetting($event, 'isIgnoreRecommendStock', row)"
            v-model="row.isIgnoreRecommendStock"
            :disabled="!$hasPermission('distribution:skuShopStock:edit')"
          >
            <el-option :label="$t('锁定')" :value="0" />
            <el-option :label="$t('推荐')" :value="1" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        :label="$t('店铺最大库存')"
        width="150"
        align="center"
        prop="recommendStock"
      >
        <template slot-scope="{ row }">
          <div style="cursor: pointer; color: #1890ff" @click="handleShopMaxStock(row)">
            <span v-if="row.maxStock == 0">{{ $t('不限制') }} </span>
            <span v-else>{{ row.maxStock }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip :label="$t('周销量/月销量/总销量')" align="center" prop="recommendStock">
        <template slot-scope="{ row }">
          <div>{{ row.weekSales }}/{{ row.monthSales }}/{{ row.totalSales }}</div>
          <div style="font-size: 12px">{{ row.saleUpdateTime }}</div>
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip :label="$t('url/备注')" align="center" prop="url">
        <template slot-scope="{ row }">
          <div>
            <el-link :href="row.url" target="_blank">{{ row.url }}</el-link>
          </div>
          <div>
            {{ $t('备注') }}: <span style="font-size: 12px">{{ row.remark }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('操作')"
        align="center"
        fixed="right"
        class-name="small-padding fixed-width"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['distribution:skuShop:edit']"
          >
            {{ $t('编辑') }}
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleStockHis(scope.row)"
            v-hasPermi="['distribution:skuShopRecords:list']"
          >
            {{ $t('店铺库存记录') }}
          </el-button>
          <el-button
            size="mini"
            type="text"
            style="color: red"
            @click="handleDelete(scope.row)"
            v-hasPermi="['distribution:skuShop:remove']"
          >
            {{ $t('删除') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改店铺SKU关联对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item :label="$t('平台类型')" prop="shopType">
          <el-select @change="handleShopTypeChange" style="width: 100%" clearable filterable v-model="form.shopType">
            <el-option
              :value="item.dictValue"
              :label="item.dictLabel"
              v-for="(item, index) in shop_type_list"
              :key="index"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.shopType" :label="$t('店铺名称')" prop="shopId">
          <el-select style="width: 100%" v-model="form.shopId" filterable>
            <el-option :label="item.name" :value="item.id" v-for="(item, index) in distributorShopList" :key="index" />
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('店铺SKU')" prop="shopSku">
          <el-input v-model="form.shopSku" :placeholder="$t('请输入')" />
        </el-form-item>
        <el-form-item :label="$t('平台sku')" prop="shopSkuType">
          <el-select style="width: 100%" v-model="form.shopSkuType" @change="setShopSkuType">
            <el-option :label="$t('单品')" :value="1" />
            <el-option :label="$t('组合')" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item v-show="form.shopSkuType == 1" :label="$t('单品列表')" prop="skuId">
          <el-select
            @change="handleShopSkuType"
            remote
            :remote-method="
              (query) => {
                selectSearchValue = query
                handleSearch(query)
              }
            "
            filterable
            style="width: 100%"
            v-model="form.skuId"
          >
            <el-option
              :label="item.skuNo"
              :value="item.id"
              v-for="(item, index) in distributorShopSkuList"
              :key="item.id"
            >
              <div style="display: flex; align-items: center">
                <div>{{ item.skuNo }}</div>
                <el-image
                  fit="contain"
                  style="width: 30px; height: 30px; margin-left: 15px"
                  :src="item.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
                />
              </div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-show="form.shopSkuType == 2" :label="$t('组合列表')" prop="skuId">
          <el-select
            remote
            :remote-method="
              (query) => {
                selectSearchValue = query
                handleSearch(query)
              }
            "
            @change="handleShopSkuType"
            filterable
            style="width: 100%"
            v-model="form.skuId"
          >
            <el-option
              :label="item.combinationName"
              :value="item.id"
              v-for="(item, index) in distributorShopCombinationList"
              :key="item.id"
            >
              <div style="display: flex; align-items: center">
                <div>{{ item.combinationName }}</div>
                <el-image
                  fit="contain"
                  style="width: 30px; height: 30px; margin-left: 15px"
                  :src="item.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
                />
              </div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="URL">
          <el-input v-model="form.url" :placeholder="$t('请输入')" />
        </el-form-item>
        <el-form-item :label="$t('图片')">
          <ImgUploadManage :needSplit="false" type="2" :fileList.sync="form.imgUrl" :businessId="form.id" />
        </el-form-item>
        <el-form-item :label="$t('备注')">
          <el-input v-model="form.remark" type="textarea" :rows="4" :placeholder="$t('请输入')" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">
          {{ $t('确定') }}
        </el-button>
        <el-button @click="cancel">{{ $t('取消') }}</el-button>
      </div>
    </el-dialog>

    <Import
      action="/distribution/skuShop/importShopSku"
      templateUrl="distribution/skuShop/tempDownload"
      @success="getList"
      :show.sync="showImport"
    />
    <!-- 组合模板 -->
    <CompositeTemplate
      :formData="compositeTemplate.formData"
      :show.sync="compositeTemplate.show"
      :combinationId="compositeTemplate.formData.combinationId"
      @success="getList"
    />
    <el-dialog :visible.sync="skuInformationInfo.show" width="80%" append-to-body>
      <!-- sku模版(卖家) -->
      <skuInformation
        ref="skuInformationRef"
        :skuId="skuInformationInfo.formData.skuId"
        @cancel="skuInformationInfo.show = false"
        disabled
      />
    </el-dialog>
    <!-- sku详情/修改 -->
    <Skucontmoduler @relaod="getList" ref="Skucontmoduler"></Skucontmoduler>
    <!-- 组合 sku列表 -->
    <el-dialog :visible.sync="combinationInfo.show" width="80%" append-to-body>
      <template #title>
        <div style="text-align: center; color: #1890ff; cursor: pointer" @click="handleCompositeTemplate">
          {{ $t('组合模板') }}
        </div>
      </template>
      <el-table ref="TableRef" :data="combinationInfo.formData">
        <!-- sku -->
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="skuNo"
          :label="$t('单品SKU')"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="{ row }">
            <div @click="handleEdit(row)" style="cursor: pointer; color: #1890ff">
              {{ row.skuNo }}
            </div>
          </template>
        </el-table-column>
        <!-- 图片 -->
        <el-table-column prop="imgUrl" :label="$t('图片')" align="center">
          <template slot-scope="{ row }">
            <el-image
              fit="contain"
              :key="Math.random()"
              v-hover="row.imgUrl"
              style="width: 50px; height: 50px"
              class="goods-img-mini"
              :src="row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
            />
          </template>
        </el-table-column>
        <!-- 名字 -->
        <el-table-column show-overflow-tooltip width="200" prop="skuNameCn" :label="$t('中文名')" align="center" />
        <el-table-column show-overflow-tooltip width="200" prop="skuNameJp" :label="$t('日文名')" align="center" />

        <!-- 组合数量 -->
        <el-table-column :label="$t('组合数量')" prop="combinationNum" align="center"> </el-table-column>
        <!-- 规格 -->
        <el-table-column show-overflow-tooltip prop="specificatio" :label="$t('规格')" align="center" />

        <!-- 可售数量 -->
        <el-table-column show-overflow-tooltip prop="saleNum" :label="$t('可售数量')" align="center" />

        <!-- 操作 -->
        <!--  <el-table-column fixed="right" :label="$t('操作')" width="200" align="center">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              @click="editNumber(row)"
              v-hasPermi="['distribution:distributorShopCombination:edit']">
              {{ $t('编辑数量') }}
            </el-button>
            <el-button
              type="text"
              @click="deleteCombinSku(row.id)"
              v-hasPermi="['distribution:distributorShopCombination:remove']">
              {{ $t('删除') }}
            </el-button>
          </template>
        </el-table-column>-->
      </el-table>
    </el-dialog>
    <!-- 店铺库存 -->
    <ShopStock :show.sync="shopStock.show" :formData="shopStock.formData" @getList="getList" />
    <!-- 推荐库存 -->
    <RecommendStock :show.sync="recommendStock.show" :formData="recommendStock.formData" @getList="getList" />
    <!-- 店铺最大库存 -->
    <ShopMaxStock :show.sync="shopMaxStock.show" :formData="shopMaxStock.formData" @getList="getList" />
    <!-- 店铺库存记录 -->
    <StockHis :show.sync="stockHis.show" :formData="stockHis.formData" @getList="getList" />
    <!-- 导出推荐店铺库存 -->
    <ComputeRecommendStockExport :show.sync="computeRecommendStockExport.show" @getList="getList" />
  </div>
</template>

<script>
import {
  addSkuShop,
  delSkuShop,
  getCombinationSkuByCombinationId,
  getDistributorShopList,
  getSellerShopSku,
  getSkuShop,
  listSkuShop,
  updateSkuShop,
  updateSkuShopSetting,
  updateSales,
  computeRecommendStock,
  updateStockByRecommendStock,
} from '@/api/distribution/sku/storeSkuList'
import Skucontmoduler from '@/components/Skucontmoduler'
import CompositeTemplate from '@/components/CompositeTemplate'
import skuInformation from '@/components/Skucontmoduler/conponents/skuInformation.vue'
import { checkPermi } from '@/utils/permission'

import { useDict } from '@/utils/useDict'

import Import from '@/components/Import/index.vue'
import { debounce } from '@/utils'
import ShopStock from './components/shopStock.vue'
import ShopMaxStock from './components/shopMaxStock.vue'
import RecommendStock from './components/recommendStock.vue'
import StockHis from './components/stockHis.vue'
import ComputeRecommendStockExport from './components/computeRecommendStockExport.vue'

export default {
  activated() {
    this.$nextTick(() => this.$refs['MainTableRef']?.doLayout())
  },
  name: 'StoreSkuList',
  components: {
    ComputeRecommendStockExport,
    StockHis,
    ShopMaxStock,
    RecommendStock,
    ShopStock,
    Import,
    CompositeTemplate,
    skuInformation,
    Skucontmoduler,
  },
  data() {
    return {
      computeRecommendStockExport: {
        show: false,
      },
      tableCheck: [],
      /**店铺库存记录 */
      stockHis: {
        show: false,
        formData: {},
      },
      /**推荐库存 */
      recommendStock: {
        show: false,
        formData: {},
      },
      /**店铺最大库存 */
      shopMaxStock: {
        show: false,
        formData: {},
      },
      /**店铺库存 */
      shopStock: {
        show: false,
        formData: {},
      },
      selectSearchValue: '',
      /**点击的表格项 */
      clickedRows: [],
      /**组合sku列表 */
      combinationInfo: {
        show: false,
        formData: {},
      },
      /**sku模板 */
      skuInformationInfo: {
        show: false,

        formData: {},
      },
      /**组合模板 */
      compositeTemplate: {
        show: false,
        formData: {},
      },
      /**店铺类型列表 */
      shop_type_list: [],
      /**
       * 导入组件的显示与隐藏
       */
      showImport: false,
      /**店铺SKU列表 */
      shopSkuList: [],
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 店铺SKU关联表格数据
      skuShopList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        shopId: undefined,
        shopSkuType: undefined,
        shopSku: undefined,
        skuId: undefined,
        skuNo: undefined,
        url: undefined,
        imgUrl: undefined,
        distrId: undefined,
      },
      // 表单参数
      form: {
        imgUrl: '',
        skuId: '',
        shopType: '',
      },
      // 表单校验
      rules: {
        shopType: [
          {
            required: true,
            message: this.$t('请输入'),
            trigger: 'blur',
          },
        ],
        shopId: [
          {
            required: true,
            message: this.$t('请输入'),
            trigger: 'blur',
          },
        ],
        shopSku: [
          {
            required: true,
            message: this.$t('请输入'),
            trigger: 'blur',
          },
        ],
        imgUrl: [
          {
            required: true,
            message: this.$t('请选择'),
            trigger: 'blur',
          },
        ],
        url: [
          {
            required: true,
            message: this.$t('请输入'),
            trigger: 'blur',
          },
        ],
        shopSkuType: [
          {
            required: true,
            message: this.$t('请选择'),
            trigger: 'change',
          },
        ],
        skuId: [
          {
            required: true,
            message: this.$t('请选择'),
            trigger: 'change',
          },
        ],
      },
      /**卖家所有店铺 */
      distributorShopList: [],
      /**卖家所有SKU */
      distributorShopSkuList: [],
      /**卖家所有组合 */
      distributorShopCombinationList: [],
    }
  },

  created() {
    this.getList()
    useDict('shop_type').then(({ shop_type }) => {
      this.shop_type_list = shop_type.map((item) => {
        return {
          ...item,
          dictValue: +item.dictValue,
        }
      })
    })
  },
  watch: {
    'queryParams.pageNum': function (val) {
      this.clickedRows = []
    },
  },
  methods: {
    handleUpdateSetting(value, key, row) {
      const data = {
        [key]: value,
        id: row.id,
      }
      updateSkuShopSetting(data).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.$message({ type: 'success', message: msg })
          this.getList()
        }
      })
    },
    handleUpdateStockByRecommendStock() {
      this.$confirm(this.$t('确认更新推荐库存?'), this.$t('提示'), {
        type: 'warning',
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.5)',
        })
        const data = {}
        updateStockByRecommendStock(data)
          .then((res) => {
            const { code, data, msg } = res
            if (code === 200) {
              this.$message({ type: 'success', message: msg })
              this.getList()
            }
          })
          .finally(() => loading.close())
      })
    },
    handleComputeRecommendStock() {
      this.computeRecommendStockExport.show = true
    },
    handleUpdateSales() {
      this.$confirm(this.$t('更新推荐库存会把所有的店铺库存更新为推荐的值,确认更新吗?'), this.$t('提示'), {
        type: 'warning',
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.5)',
        })
        const data = {}
        updateSales(data)
          .then((res) => {
            const { code, data, msg } = res
            if (code === 200) {
              this.$message({ type: 'success', message: msg })
              this.getList()
            }
          })
          .finally(() => loading.close())
      })
    },
    handleStockHis(row) {
      this.stockHis.formData = row
      this.stockHis.show = true
    },

    handleShopMaxStock(row) {
      const flag = checkPermi(['distribution:skuShopStock:edit'])
      if (!flag) return
      this.shopMaxStock.formData = row
      this.shopMaxStock.show = true
    },
    handleRecommendStock(row) {
      const flag = checkPermi(['distribution:skuShopStock:edit'])
      if (!flag) return
      this.recommendStock.formData = row
      this.recommendStock.show = true
    },
    handleShopStock(row) {
      const flag = checkPermi(['distribution:skuShopStock:edit'])
      if (!flag) return
      this.shopStock.formData = row
      this.shopStock.show = true
    },
    handleType(type) {
      const index = this.shop_type_list.findIndex((i) => i.dictValue == type)
      return this.shop_type_list[index]?.dictLabel
    },
    handleCombinationInfo(row) {
      // 组合模板信息
      this.compositeTemplate.formData = row
      getCombinationSkuByCombinationId(row.combinationId).then((res) => {
        const { code, data } = res
        this.combinationInfo.show = true
        this.combinationInfo.formData = data
      })
    },
    handleEdit(row) {
      this.$refs.Skucontmoduler.setSkuInfo(row)
      this.$refs.Skucontmoduler.checkNumber('basicInformationSeller')
    },

    handleShopSkuType() {
      // 单品
      if (this.form.shopSkuType == 1) {
        const item = this.distributorShopSkuList.filter((i) => i.id == this.form.skuId)[0] || {}
        this.form.skuNo = item.skuNo
        this.setImageList(item.imgUrl)
      }
      // 组合
      if (this.form.shopSkuType == 2) {
        const item = this.distributorShopCombinationList.filter((i) => i.id == this.form.skuId)[0] || {}
        this.form.skuNo = item.combinationName
        this.setImageList(item.imgUrl)
      }
    },
    setImageList(url = '') {
      this.form.imgUrl = url
      // this.$nextTick(() => {
      //   this.$refs.ImageUploadRef.setFileList([
      //     { url: url ? url + '?x-oss-process=image/resize,w_100/quality,q_70' : '' },
      //   ])
      // })
    },
    handleSkuInformationInfo(row) {
      this.skuInformationInfo.formData = row
      this.skuInformationInfo.show = true
    },

    handleCompositeTemplate() {
      this.compositeTemplate.show = true
    },
    handleShopTypeChange() {
      this.form.shopId = ''
      this.distributorShopList = []
      this.getDistributorShopList(this.form.shopType)
    },
    /**获取店铺列表 */
    getDistributorShopList(platformType) {
      getDistributorShopList({ platformType }).then((res) => {
        this.distributorShopList = JSON.parse(JSON.stringify(res.data))
      })
    },

    searchShopSku(value) {
      console.log(`value ==>`, value)
    },

    /** 查询店铺SKU关联列表 */
    getList() {
      this.loading = true
      listSkuShop(this.queryParams).then((response) => {
        this.skuShopList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        shopId: undefined,
        shopType: undefined,
        shopSkuType: undefined,
        shopSku: undefined,
        skuId: undefined,
        skuNo: undefined,
        url: undefined,
        imgUrl: '',
        distrId: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        remark: undefined,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams.pageSize = 10
      this.queryParams.pageNum = 1
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.tableCheck = selection
      this.ids = selection.map((item) => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      // this.getNeedList()
      this.open = true
      this.title = this.$t('新增')

      this.setImageList()
    },

    handleSearch: debounce(function (e) {
      let self = this
      const data = {
        // type	类型 1-单品 2-组合
        type: self.form.shopSkuType,
        skuNo: self.form.shopSkuType == 1 ? this.selectSearchValue : undefined,
        combinationName: self.form.shopSkuType == 2 ? this.selectSearchValue : undefined,
      }
      getSellerShopSku(data).then((res) => {
        const { code, data } = res
        if (code === 200) {
          if (self.form.shopSkuType == 1) {
            self.distributorShopSkuList = data
          } else {
            self.distributorShopCombinationList = data
          }
        }
      })
    }, 1000),
    setShopSkuType(type) {
      this.form.skuId = ''
      this.setImageList()
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.loading = true
      this.reset()
      const id = row.id || this.ids

      getSkuShop(id).then((res) => {
        const { data } = res
        this.form = data
        if (this.form.shopSkuType == 1) {
          this.distributorShopSkuList = data.combinationSkuList || []
        } else {
          this.distributorShopCombinationList = data.combinationSkuList || []
        }
        this.getDistributorShopList(this.form.shopType)
        this.loading = false
        this.open = true
        this.title = this.$t('编辑')
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          if (this.form.id != null) {
            updateSkuShop(this.form)
              .then((res) => {
                this.$message({ type: 'success', message: res.msg })

                this.open = false
                this.getList()
              })
              .finally(() => {
                this.buttonLoading = false
              })
          } else {
            addSkuShop(this.form)
              .then((res) => {
                this.$modal.msgSuccess(res.msg)
                this.open = false
                this.getList()
              })
              .finally(() => {
                this.buttonLoading = false
              })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal
        .confirm(this.$t('确定删除?'))
        .then(() => {
          this.loading = true
          delSkuShop(ids).then((res) => {
            this.loading = false
            this.$message({ type: 'success', message: res.msg })

            this.getList()
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        'distribution/skuShop/exportShopSku',
        {
          ...this.queryParams,
        },
        `exportShopSkuList_${new Date().getTime()}.xlsx`,
      )
    },
  },
}
</script>
<style lang="scss" scoped>
.goods {
  &-img {
    &-box {
      position: relative;
    }

    &-mini {
      height: 50px;
      border-radius: 3px;

      &:hover {
        & + .goods-img-big {
          display: block;
        }
      }
    }

    &-big {
      // display: none;
      position: absolute;
      z-index: 100;
      top: -180px;
      left: 0;
      transform: translate(0, 70px);
      width: 200px;
      height: 200px;
      border-radius: 3px;
    }
  }
}

.bigImg {
  border-radius: 3px;
  z-index: 10;
  position: fixed;
  width: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
